import React, { Component } from 'react';
import { Card, Descriptions,  Modal, Form, Input, Row, Col, Checkbox, Radio } from 'antd';


import styles from './style.less';


const options = [
    { label: '创新百强', value: '创新百强' },
    { label: '增值百强', value: '增值百强' },
    { label: '产值百强', value: '产值百强' },
    { label: '纳税百强', value: '纳税百强' },
    { label: '出口百强', value: '出口百强' },
]


const EditModal = Form.create()(
    // eslint-disable-next-line react/prefer-stateless-function
    class extends React.Component {
        render() {
            const { visible, onCancel, onCreate, form } = this.props
            const { getFieldDecorator } = form
            return (
                <Modal
                    visible={visible}
                    title="企业经营数据"
                    width='60%'
                    onCancel={onCancel}
                    onOk={onCreate}
                    style={{top: '33px'}}
                >
                    <Form colon={false} className={styles.editModalForm}>
                        <div className={styles.editModalFormTitle}>资产情况：</div>
                        <Row gutter={48}>
                            <Col span={12}>
                                <Form.Item label="总资产" required={false}>
                                    {getFieldDecorator('total_property', {
                                        rules: [{ required: true, message: '请输入!'}],
                                    })(<Input placeholder="请输入"  suffix="万元"/>)}
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="固定资产" required={false}>
                                    {getFieldDecorator('fixed_property', {
                                        rules: [{ required: true, message: '请输入!'}],
                                    })(<Input placeholder="请输入" suffix="万元"/>)}
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={48}>
                            <Col span={12}>
                                <Form.Item label="资产负债率" required={false}>
                                    {getFieldDecorator('owe_rate', {
                                        rules: [{ required: true, message: '请输入!'}],
                                    })(<Input placeholder="请输入" suffix="%"/>)}
                                </Form.Item>
                            </Col>
                        </Row>

                        <div className={styles.editModalFormTitle}>进二年经营情况：</div>
                        <Row gutter={48}>
                            <Col span={12}>
                                <Form.Item label="2017年总产值（或销售收入）" required={false}>
                                    
                                    {getFieldDecorator('pastyear_business_llyear', {
                                        rules: [{ required: true, message: '请输入!'}],
                                    })(<Input placeholder="请输入"  suffix="万元"/>)}
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="2018年总产值（或销售收入）" required={false}>
                                    
                                    {getFieldDecorator('pastyear_business_lyear', {
                                        rules: [{ required: true, message: '请输入!'}],
                                    })(<Input placeholder="请输入" suffix="万元"/>)}
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={48}>
                            <Col span={12}>
                                <Form.Item label="同比增减率" required={false}>
                                    {getFieldDecorator('pastyear_business_rate', {
                                        rules: [{ required: true, message: '请输入!'}],
                                    })(<Input placeholder="请输入" suffix="%"/>)}
                                </Form.Item>
                            </Col>
                        </Row>

                        <div className={styles.editModalFormTitle}>进二年研发投入情况：</div>
                        <Row gutter={48}>
                            <Col span={12}>
                                <Form.Item label="2017年" required={false}>
                                    {getFieldDecorator('pastyear_research_llyear', {
                                        rules: [{ required: true, message: '请输入!'}],
                                    })(<Input placeholder="请输入" suffix="万元"/>)}
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="2018年" required={false}>
                                    {getFieldDecorator('pastyear_research_lyear', {
                                        rules: [{ required: true, message: '请输入!'}],
                                    })(<Input placeholder="请输入" suffix="万元"/>)}
                                </Form.Item>
                            </Col>
                        </Row>

                        <div className={styles.editModalFormTitle}>纳税总税</div>
                        <Row gutter={48}>
                            <Col span={12}>
                                <Form.Item label="净纳税总税" required={false}>
                                    {getFieldDecorator('tax_total_total', {
                                        rules: [{ required: true, message: '请输入!'}],
                                    })(<Input placeholder="请输入" suffix="万元"/>)}
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="2018年纳税总税" required={false}>
                                    {getFieldDecorator('tax_total_lyear', {
                                        rules: [{ required: true, message: '请输入!'}],
                                    })(<Input placeholder="请输入" suffix="万元"/>)}
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={48}>
                            <Col span={12}>
                                <Form.Item label="2017年纳税总税" required={false}>
                                    {getFieldDecorator('tax_total_llyear', {
                                        rules: [{ required: true, message: '请输入!'}],
                                    })(<Input placeholder="请输入" suffix="万元"/>)}
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="同比增减率" required={false}>
                                    {getFieldDecorator('tax_total_rate', {
                                        rules: [{ required: true, message: '请输入!'}],
                                    })(<Input placeholder="请输入" suffix="%"/>)}
                                </Form.Item>
                            </Col>
                        </Row>

                        <div className={styles.editModalFormTitle}>企业资质（2018年）</div>
                        <Row gutter={48}>
                            <Col span={12}>
                                <Form.Item label="专精特新" required={false}>
                                    {getFieldDecorator('islisted', {
                                        rules: [{ required: true, message: '请选择!'}],
                                    })(<Radio.Group onChange={this.onChange} value={1}>
                                        <Radio value={1}>是</Radio>
                                        <Radio value={0}>否</Radio>
                                    </Radio.Group>)}
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="是否独角兽企业" required={false}>
                                    {getFieldDecorator('isunicorn', {
                                        rules: [{ required: true, message: '请选择!'}],
                                    })(<Radio.Group onChange={this.onChange} value={1}>
                                        <Radio value={1}>是</Radio>
                                        <Radio value={0}>否</Radio>
                                    </Radio.Group>)}
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={48}>
                            <Col span={12}>
                                <Form.Item label="是否五类百强" required={false}>
                                    {getFieldDecorator('isfivetop', {
                                        rules: [{ required: true, message: '请选择!'}],
                                    })(<Radio.Group onChange={this.onChange} value={1}>
                                        <Radio value={1}>是</Radio>
                                        <Radio value={0}>否</Radio>
                                    </Radio.Group>)}
                                </Form.Item>
                            </Col>
                        </Row>
                        
                        <Row gutter={48}>
                            <Col span={48}>
                                <Form.Item required={false}>
                                    {getFieldDecorator('options')(
                                        <Checkbox.Group options={options}/>
                                    )}
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form>
                </Modal>
            )
        }
    }
)





// eslint-disable-next-line react/prefer-stateless-function
class BusinessForm extends Component {
    state = {
        visible: false
    };

    showModal = () => {
        const { data } = this.props
        const { form } = this.formRef.props
        console.log(data)
        if (data.Id !== 0 && !data.Id) {
            this.setState({ visible: true })
            return;
        }
        form.setFieldsValue({
            total_property: data.total_property,
            fixed_property: data.fixed_property,
            owe_rate: data.owe_rate,
            pastyear_business_llyear: data.pastyear_business.ll_year,
            pastyear_business_lyear: data.pastyear_business.l_year,
            pastyear_business_rate: data.pastyear_business.rate,

            pastyear_research_llyear: data.pastyear_research.ll_year,
            pastyear_research_lyear: data.pastyear_research.l_year,

            tax_total_lyear: data.tax_total.l_year,
            tax_total_llyear: data.tax_total.ll_year,
            tax_total_total: data.tax_total.total,
            tax_total_rate: data.tax_total.rate,

            // situation: data.situation,
            isunicorn: data.isunicorn,
            islisted: data.islisted,
            isfivetop: data.isfivetop,

            options: data.options,
        })
        this.setState({ visible: true })
    }

    handleCancel = () => {
        this.setState({
            visible: false,
        });
    };

    handleCreate = () => {
        const { form } = this.formRef.props
        const { confirm } = this.props
        form.validateFields((err, values) => {
            if (err) {
                return;
            }

            const params = {
                total_property: values.total_property,     // 总资产（万元）
                fixed_property: values.fixed_property,     // 固定资产（万元）
                owe_rate: values.owe_rate,  // 资产负债率（%）
                // 近二年经营情况
                pastyear_business: {
                    ll_year: values.pastyear_business_llyear,        // 2017年总产值（或销售收入）万元
                    l_year: values.pastyear_business_lyear,        // 2018年总产值（或销售收入）万元
                    rate: values.pastyear_business_rate        // 同比增减率
                },
                // 近二年研发投入情况
                pastyear_research: {
                    // 2017年
                    ll_year: values.pastyear_research_llyear,
                    // 2018年
                    l_year: values.pastyear_research_lyear,
                },
                // 纳税总值
                tax_total: {
                    total: values.tax_total_total,          // 净纳税总税（万元）
                    ll_year: values.tax_total_llyear,        // 2017年纳税总税（万元）
                    l_year: values.tax_total_lyear,         // 2018年纳税总税（万元）
                    rate: values.tax_total_rate,            // 同比增减率
                },
                // situation: '',  // 经营情况说明
                // 是否独角兽企业
                isunicorn: values.isunicorn,
                // 是否上市
                islisted: values.islisted,
                // 是否类五百强
                isfivetop: values.isfivetop,
                options: values.options

            }
            confirm(params)

            this.setState({ visible: false })
        })
    }

    saveFormRef = formRef => { this.formRef = formRef }

    render () {
        const { data, type } = this.props

        // eslint-disable-next-line consistent-return
        const EditHead = () => {
            if (type === 'edit') {
                return (
                    <Card className={styles.basicHeadLayout} bordered={false}>
                        <div className={styles.headName}>二、企业经营数据</div>
                        <a onClick={this.showModal}>编辑 </a>
                    </Card>
                )
            }
            return (<></>)
        }

        return (
            <>
                <EditHead />
                <Card bordered={false} className={styles.publicContent}>
                    <Descriptions bordered column={3} size="middle">
                        <Descriptions.Item span={3} label={(<div className={styles.dcLabelCenter}>资产情况</div>)} className={styles.dcContentLeft}>
                            <Descriptions bordered column={1} size="middle" className={styles.dcFirst}>
                                <Descriptions.Item label="总资产（万元）" span={1}>{data.total_property ? `${data.total_property}（万元）` : ''}</Descriptions.Item>
                                <Descriptions.Item label="固定资产（万元）" span={1}>{data.fixed_property ? `${data.fixed_property}（万元）` : ''}</Descriptions.Item>
                                <Descriptions.Item label="资产负债率（%）" span={1}>{data.owe_rate ? `${data.owe_rate}%` : ''}</Descriptions.Item>
                            </Descriptions>
                        </Descriptions.Item>

                        <Descriptions.Item span={3} label={(<div className={styles.dcLabelCenter}>近二年经营情况</div>)} className={styles.dcContentLeft}>
                            <div style={{display:'flex'}}>
                                <div style={{width: '60%'}}>
                                    <Descriptions bordered column={1} size="middle" className={styles.dcFirst}>
                                        <Descriptions.Item label="2017年总产值（或销售收入）万元" span={1}>{data.pastyear_business ? `${data.pastyear_business.ll_year}（万元）` : ''}</Descriptions.Item>
                                        <Descriptions.Item label="2018年总产值（或销售收入）万元" span={1}>{data.pastyear_business ? `${data.pastyear_business.l_year}（万元）` : ''}</Descriptions.Item>
                                    </Descriptions>
                                </div>

                                <Descriptions bordered column={1} size="middle" className={styles.dcSecondary}>
                                    <Descriptions.Item label="同比增减率" span={1}>{data.pastyear_business ? `${data.pastyear_business.rate}%` : ''}</Descriptions.Item>
                                </Descriptions>
                            </div>
                        </Descriptions.Item>


                        <Descriptions.Item span={3} label={(<div className={styles.dcLabelCenter}>近二年研发投入情况</div>)} className={styles.dcContentLeft}>
                            <Descriptions bordered column={1} size="middle" className={styles.dcFirst}>
                                <Descriptions.Item label="2017年（万元）" span={1}>{data.pastyear_research ? `${data.pastyear_research.ll_year}（万元）` : ''}</Descriptions.Item>
                                <Descriptions.Item label="2018年（万元）" span={1}>{data.pastyear_research ? `${data.pastyear_research.l_year}（万元）` : ''}</Descriptions.Item>
                            </Descriptions>
                        </Descriptions.Item>

                        <Descriptions.Item span={3} label={(<div className={styles.dcLabelCenter}>纳税总值</div>)} className={styles.dcContentLeft}>
                            <Descriptions bordered column={1} size="middle" className={styles.dcFirst}>
                                <Descriptions.Item label="净纳税总税（万元）" span={1}>{data.tax_total ? `${data.tax_total.total}（万元）` : ''}</Descriptions.Item>
                            </Descriptions>
                            <div style={{display:'flex', borderTop: '1px solid #e8e8e8'}}>
                                <div style={{width: '60%'}}>
                                    <Descriptions bordered column={1} size="middle" className={styles.dcFirst}>
                                        <Descriptions.Item label="2017年纳税总税（万元）" span={1}>{data.tax_total ? `${data.tax_total.ll_year}（万元）` : ''}</Descriptions.Item>
                                        <Descriptions.Item label="2018年纳税总税（万元）" span={1}>{data.tax_total ? `${data.tax_total.l_year}（万元）` : ''}</Descriptions.Item>
                                    </Descriptions>
                                </div>

                                <Descriptions bordered column={1} size="middle" className={styles.dcSecondary}>
                                    <Descriptions.Item label="同比增减率" span={1}>{data.tax_total ? `${data.tax_total.rate}%` : ''}</Descriptions.Item>
                                </Descriptions>
                            </div>

                        </Descriptions.Item>

                        <Descriptions.Item span={3} label={(<div className={styles.dcLabelCenter}>经营情况说明</div>)}>
                            <div
                                style={{minHeight: '70px', display:'flex', alignItems: 'center', color: 'rgba(0, 0, 0, 0.85)'}}
                            >
                                {data.situation ? `${data.situation}` : '无'}
                            </div>
                        </Descriptions.Item>


                        <Descriptions.Item span={3} label={(<div className={styles.dcLabelCenter}>企业资质（2018年）</div>)} className={styles.dcContentLeft}>
                            <div
                                style={{
                                    padding: '12px 24px',
                                    display:'flex',
                                    alignItems: 'center',
                                    borderBottom: '1px solid #e8e8e8',
                                    color: 'rgba(0, 0, 0, 0.85)'
                                }}
                            >
                                {!data.isunicorn&&!data.islisted&&!data.isfivetop ? '／': ''}
                                {data.isunicorn ? '专精特新，' : ''}
                                {data.islisted ? '独角兽企业，' : ''}
                                {data.isfivetop ? '五类百强' : ''}
                                {data.isfivetop&&data.options.length > 0 ? `（${data.options.join(',')}）` : ''}
                            </div>
                            <Descriptions bordered column={1} size="middle" className={styles.dcFirst}>
                                <Descriptions.Item label="企业资质记录详情" span={1}>
                                    <span style={{color: 'rgba(0, 0, 0, 0.85)'}}>2017：{data.record_details ? `${data.record_details.llyear}` : ''}</span>
                                    {/* <br/> */}
                                    {/* 2018：{data.record_details ? `${data.record_details.lyear}` : ''} */}
                                </Descriptions.Item>
                            </Descriptions>
                        </Descriptions.Item>
                    </Descriptions>

                    {/* 弹窗 */}
                    <EditModal />
                </Card>
                <EditModal 
                    wrappedComponentRef={this.saveFormRef}
                    visible={this.state.visible}
                    onCancel={this.handleCancel}
                    onCreate={this.handleCreate}
                />           
                                
            </>
            
        )
    }
}

// eslint-disable-next-line react/prefer-stateless-function

export default BusinessForm